<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>通知列表</title>
    <link type="text/css" rel="stylesheet" th:href="@{${skinPath} + '/css.css'}"/>
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css"/>
    <link href="../lte/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <style>
        .search-form {
            margin: 10px;
        }
        .search-form input, select {
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript" src="../inc/common.js"></script>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="../js/flexigrid.js"></script>
    <script src="../js/jquery-alerts/jquery.alerts.js" type="text/javascript"></script>
    <script src="../js/jquery-alerts/cws.alerts.js" type="text/javascript"></script>
    <link href="../js/jquery-alerts/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="../js/datepicker/jquery.datetimepicker.css"/>
    <script src="../js/datepicker/jquery.datetimepicker.js"></script>

    <link href="../js/jquery-showLoading/showLoading.css" rel="stylesheet" media="screen" />
    <script type="text/javascript" src="../js/jquery-showLoading/jquery.showLoading.js"></script>
    <script src="../js/jquery-showLoading/jquery.showLoading.js"></script>

    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../js/soul-table/soulTable.css" media="all">
    <script src="../js/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="page-main">
    <div id="searchFormBox" class="search-form-box">
        <form id="searchForm" name="searchForm" class="search-form" method="get">
            <input id="op" name="op" value="search" type="hidden"/>
            <select id="cond" name="cond">
                <option value="title">标题</option>
                <option value="content">内容</option>
            </select>
            <input id="what" name="what" size="15" value=""/>
            &nbsp;从
            <input size="8" id="fromDate" name="fromDate" value=""/>
            至
            <input size="8" id="toDate" name="toDate" value=""/>
            <input class="btn btn-default btn-search" value="搜索" type="button"/>
        </form>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_list"></table>
    <script type="text/html" id="toolbar_list">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="add" title="增加"><i class="fa fa-plus-circle"></i>增加</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange" lay-event="edit" title="修改"><i class="fa fa-pencil"></i>修改</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i>删除</button>
        </div>
    </script>
    <script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-xs" lay-event="show">查看</a>
    </script>
</div>
<script th:inline="javascript">
    function del(code, name) {
        jConfirm('您确定要删除 ' + name + ' 么？', '提示', function (r) {
            if (!r) {
                return;
            } else {
                $.ajax({
                    type: "post",
                    url: "delModule.do",
                    data: {
                        code: code
                    },
                    dataType: "json",
                    beforeSend: function (XMLHttpRequest) {
                        // ShowLoading();
                    },
                    success: function (data, status) {
                        if (data.ret == "1") {
                            $('#tr' + code).remove();
                        } else {
                            jAlert(data.msg, "提示");
                        }
                    },
                    complete: function (XMLHttpRequest, status) {
                        // HideLoading();
                    },
                    error: function (XMLHttpRequest, textStatus) {
                        // 请求出错处理
                        jAlert(XMLHttpRequest.responseText, "提示");
                    }
                });
            }
        })
    }

    var tableData;
    layui.config({
        base: '../js/',   // 第三方模块所在目录
        // version: 'v1.6.2' // 插件版本号
    }).extend({
        soulTable: 'soul-table/soulTable',
        tableChild: 'soul-table/tableChild',
        tableMerge: 'soul-table/tableMerge',
        tableFilter: 'soul-table/tableFilter',
        excel: 'soul-table/excel',
    });

    layui.use(['table', 'soulTable'], function () {
        var table = layui.table;
        var soulTable = layui.soulTable;

        table.render({
            elem: '#table_list'
            , toolbar: '#toolbar_list'
            , defaultToolbar: ['filter', 'print'/*, 'exports', {
				title: '提示'
				,layEvent: 'LAYTABLE_TIPS'
				,icon: 'layui-icon-tips'
			}*/]
            , drag: {toolbar: true}
            , method: 'post'
            , url: 'list.do'
            , cols: [
                [{ type: 'checkbox', fixed: 'left' }
                    , { field: 'caption', align: 'left', width: 500, title: '标题', sort: true }
                    , { field: 'userName', width: 150, title: '发布者', sort: false }
                    , { field: 'kind', width: 150, title: '类别', sort: false }
                    , { field: 'endDate', width: 150, title: '有效期', sort: false }
                    , { field: 'createDate', width: 200, title: '发布日期', sort: false }
                    , { fixed: 'right', title: '操作', toolbar: '#operateBar', width: 150 }
                ]
            ]
            , id: 'tableList'
            , page: true
            , unresize: false
            , limit: 50
            , height: 'full-68'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.errCode, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            }
            , done: function (res, curr, count) {
                tableData = res.data;
                soulTable.render(this);
            }
        });

        // 行工具栏事件
        table.on('tool(table_list)', function (obj) {
            var data = obj.data;
            if (obj.event === 'show') {
                addTab('通知公告', 'notice/show.do?id=' + data.id);
            }
        });

        // 头工具栏事件
        table.on('toolbar()', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    window.location.href = "add.do";
                    break;
                case 'edit':
                    var data = checkStatus.data;
                    if (data.length === 0) {
                        layer.msg('请选择记录', {
                            offset: '6px'
                        });
                        return;
                    }
                    else if (data.length > 1) {
                        layer.msg('只能选择一条记录', {
                            offset: '6px'
                        })
                        return;
                    }
                    var id = data[0].id;
                    // window.location.href = "edit.do?id=" + id;
                    addTab("通知修改", "notice/edit.do?id=" + id);
                    break;
                case 'del':
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg('请选择记录', {
                            offset: '6px'
                        });
                        return;
                    }

                    var ids = '';
                    for (var i in data) {
                        var json = data[i];
                        if (ids == '') {
                            ids = json.id;
                        } else {
                            ids += ',' + json.id;
                        }
                    }

                    layer.confirm('您确定要删除么？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            type: "post",
                            url: "del.do",
                            data: {
                                ids: ids
                            },
                            dataType: "html",
                            beforeSend: function (XMLHttpRequest) {
                                $("body").showLoading();
                            },
                            success: function (data, status) {
                                data = $.parseJSON(data);
                                layer.msg(data.msg, {
                                    offset: '6px'
                                });
                                if (data.ret == 1) {
                                    refresh();
                                }
                            },
                            complete: function (XMLHttpRequest, status) {
                                $("body").hideLoading();
                            },
                            error: function (XMLHttpRequest, textStatus) {
                                // 请求出错处理
                                alert(XMLHttpRequest.responseText);
                            }
                        });
                        layer.close(index);
                    });
                    break;
            }
        });

        $('.search-form .btn-search').on('click', function (e) {
            e.preventDefault();
            table.reload('tableList', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: $('.search-form').serializeJsonObject()
            }, 'data');
        });

        //监听表格排序问题
        table.on('sort()', function (obj) { //注：sort lay-filter="对应的值"
            table.reload('tableList', { //testTable是表格容器id
                initSort: obj // 记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: {
                    orderBy: obj.field //排序字段
                    , sort: obj.type //排序方式
                }
            });
        });
    });

    $.fn.serializeJsonObject = function () {
        var json = {};
        var form = this.serializeArray();
        $.each(form, function () {
            if (json[this.name]) {
                if (!json[this.name].push) {
                    json[this.name] = [json[this.name]];
                }
                json[this.name].push();
            } else {
                json[this.name] = this.value || '';
            }
        });
        return json;
    }

    $(document).ready(function () {
        $('input, select, textarea').each(function() {
            if (!$('body').hasClass('form-inline')) {
                $('body').addClass('form-inline');
            }
            if (!$(this).hasClass('ueditor') && !$(this).hasClass('btnSearch') && !$(this).hasClass('tSearch') && $(this).attr('type') != 'hidden' && $(this).attr('type') != 'file') {
                $(this).addClass('form-control');
                $(this).attr('autocomplete', 'off');
            }
        });

        $('#fromDate').datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d'
        });
        $('#toDate').datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d'
        });
    });

    function refresh() {
        layui.table.reload('tableList');
    }
</script>
</body>
</html>